<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="mainT" style="width: 600px;height:400px;"></div>




    <script src="../assets/lib/echarts/echarts.min.js"></script>
    <script>
        


const myChart = echarts.init(document.querySelector('#main'));
const myChartT = echarts.init(document.querySelector('#mainT'));

// 指定图表的配置项和数据
const option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};


// const option1 = {
//     color : ['blue','red'],
//   title: {
//     text: '薪资 Salary'
//   },
//   tooltip: {
//     trigger: 'axis'
    
//   },
//   legend: {},
//   toolbox: {
//     show: false,
//     feature: {
//       dataZoom: {
//         yAxisIndex: 'none'
//       },
//       dataView: { readOnly: false },
//       magicType: { type: ['line', 'bar'] },
//       restore: {},
//       saveAsImage: {}
//     }
//   },
//   xAxis: {
//     type: 'category',
//     boundaryGap: false,
//     data: ['陈仔', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//   },
//   yAxis: {
//     type: 'value',
//     axisLabel: {
//       formatter: ''
//     }
//   },
//   series: [
//     {
//       name: '期望薪资',
//       type: 'line',
//       symbol: 'circle',
//       smooth: true,
//       data: [10, 11, 13, 11, 12, 12, 9],
//     //   markPoint: {
//     //     data: [
//     //       { type: 'max', name: 'Max' },
//     //       { type: 'min', name: 'Min' }
//     //     ]
//     //   },
//     //   markLine: {
//     //     data: [{ type: 'average', name: 'Avg' }]
//     //   }
//     },
//     {
//       name: '实际薪资',
//       type: 'line',
//       symbol: 'circle',
//       smooth: true,
//       data: [1, -2, 2, 5, 3, 2, 0],
//     //   markPoint: {
//     //     data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
//     //   },
//     //   markLine: {
//     //     data: [
//     //       { type: 'average', name: 'Avg' },
//     //       [
//     //         {
//     //           symbol: 'none',
//     //           x: '90%',
//     //           yAxis: 'max'
//     //         },
//     //         {
//     //           symbol: 'circle',
//     //           label: {
//     //             position: 'start',
//     //             formatter: 'Max'
//     //           },
//     //           type: 'max',
//     //           name: '最高点'
//     //         }
//     //       ]
//     //     ]
//     //   }
//     }
//   ]
// };

const option1 = {
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [30, 150],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChartT.setOption(option1);
    </script>
</body>
</html>